<template>
	<view>
		<view class="nav2">
			<u-navbar title="查看售后" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex-jus f26">
					<text class="c999">订单号：{{detail.orderCode}}</text>
					<text class="c343">{{detail.aftersales.createTime}}</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex flex-start">
					<u-image :src="api_host + detail.orderPro.icon" mode="" width="76px" height="76px"
						radius="5"></u-image>
					<view class="p10 ml10 flex1">
						<view class="c343 f28 bold">{{detail.orderPro.proName}}</view>
						<u-gap height="10"></u-gap>
						<view v-if="detail.orderType==3">
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{detail.orderPro.proName}} x{{item.buyCount}}</text>
								<!-- <text>¥ {{item.price}}</text> -->
							</view>
						</view>
						<view v-else>
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{item.name}} x{{item.buyCount}}</text>
								<!-- <text>¥ {{item.price}}</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30">
				<view class="flex-jus">
					<view class="pore title-text c343 f26 bold">
						申请原因
					</view>
					<view class="f26 c666">
						{{aftersales.problem}}
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="pore title-text">
					<text class="bold f26 c343">问题描述</text>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<view class="f26 c666">
						{{aftersales.description}}
					</view>
					<view class="mt20" v-if="aftersales.images">
						<view class="flex flex-wrap">
							<view v-for="(item,index) in aftersales.images.split(',')" :key="index" class="mr20 mb10"
								@click="viewImg(index)">
								<image :src="api_host + item" mode=""
									style="width: 25vw;height: 200rpx;border-radius: 10rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30">
				<view class="pore title-text bold f26 c343">
					售后信息
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<view class="flex-jus mb10">
						<text class="f26 c999">售后状态</text>
						<text class="f26 c343">{{status[detail.isAfter]}}</text>
					</view>
				</view>
				<view class="" v-if="aftersales.accepPlan == 1 || aftersales.accepPlan == 2">
					<u-line color="#eee" margin="20rpx 0"></u-line>
					<view class="pore title-text bold f26 c343">
						退款信息
					</view>
					<u-gap height="10"></u-gap>
					<view>
						<view class="flex-jus mb10">
							<text class="f26 c999">退款方式</text>
							<text class="f26 c343">{{aftersales.accepPlan == 1?'全额退款':'部分退款'}}</text>
						</view>
						<view class="flex-jus mb10">
							<text class="f26 c999">退款金额</text>
							<text class="f26 c343">￥{{aftersales.refundAmount}}</text>
						</view>
						<view class="flex-jus">
							<text class="f26 c999">退款时间</text>
							<text class="f26 c343">{{aftersales.accepTime}}</text>
						</view>
					</view>
				</view>
				<view v-if="aftersales.accepPlan == 3">
					<u-line color="#eee" margin="20rpx 0"></u-line>
					<view class="pore title-text bold f26 c343">
						补贴优惠券
					</view>
					<u-gap height="10"></u-gap>
					<view>
						<view class="flex-jus mb10">
							<text class="f26 c999">优惠券名称</text>
							<text class="f26 c343">{{aftersales.coupon.name}}</text>
						</view>
						<view class="flex-jus mb10">
							<text class="f26 c999">优惠券类型</text>
							<text class="f26 c343">{{aftersales.coupon.range == 1?'全家政业务':'指定家政业务'}}</text>
						</view>
						<view class="flex-jus mb10">
							<text class="f26 c999">优惠券内容</text>
							<text class="f26 c343"
								v-if="aftersales.coupon.conpType == 1">满{{aftersales.coupon.conpTextObject.fullAmount}}减{{aftersales.coupon.conpTextObject.deductionAmount}}</text>
							<text class="f26 c343"
								v-if="aftersales.coupon.conpType == 2">{{aftersales.coupon.conpTextObject.discount/10}}折，最高减{{aftersales.coupon.conpTextObject.maxReduction}}元</text>
						</view>
						<view class="flex-jus mb10">
							<text class="f26 c999">有效期</text>
							<view class="f24" v-if="aftersales.coupon.lifespanType == 1">
								{{aftersales.coupon.lifespanTextObject.startTime}} ~
								{{aftersales.coupon.lifespanTextObject.endTime}}
							</view>
							<view class="f24" v-if="aftersales.coupon.lifespanType == 2">
								{{aftersales.coupon.lifespanTextObject.lifespan}}天
							</view>
						</view>
						<view class="flex-jus">
							<text class="f26 c999">发放时间</text>
							<text class="f26 c343">{{aftersales.accepTime}}</text>
						</view>
					</view>
				</view>
				<view v-if="aftersales.accepPlan == 4">
					<u-line color="#eee" margin="20rpx 0"></u-line>
					<view class="pore title-text bold f26 c343">
						拒绝退款
					</view>
					<u-gap height="10"></u-gap>
					<view>
						<view class="f26 c999">拒绝原因</view>
						<view class="f26 c343 mt10 bgF7 radiusBox p20">{{aftersales.accepDesc}}</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderdetail
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				status: {
					1: '处理中',
					2: '已完成'
				},
				detail: {},
				aftersales: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderdetail()
		},
		methods: {
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						aftersales
					} = this.detail
					this.aftersales = aftersales
				}
				uni.hideLoading()
			},
			viewImg(index) {
				let data = this.aftersales.images.split(',')
				let arr = []
				data.forEach(item => {
					arr.push(this.api_host + item)
				})
				uni.previewImage({
					urls: arr,
					current: index
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.tag_item {
		padding: 10rpx 30rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.title-text {
		line-height: 28rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: -30rpx;
		top: 2rpx;
		height: 13px;
		width: 2px;
		background-color: #FFDE6D;
	}
</style>